<!--
 * @Author: wangming
 * @Date: 2021-04-01 14:02:25
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-21 17:33:44
 * @Description: file content
-->
<template>
  <div>
    <el-form-item label="默认值" :rules="rules" prop="defaultValue">
      <xInput
        placeholder="请输入默认数字"
        size="small"
        style="width: 100%"
        :value="value.defaultValue"
        @input="outInput"
      ></xInput>
    </el-form-item>
    <el-form-item
      v-if="!isNumberCom"
      label="最小值"
      prop="__config.min"
      :rules="minrules"
    >
      <el-input-number
        size="small"
        style="width: 100%"
        v-model="value.__config.min"
        controls-position="right"
        :max="value.__config.max - 1"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="最小值" v-else>
      <el-radio-group v-model="value.__config.minType" style="width: 100%">
        <el-radio label="fix">固定值</el-radio>
        <el-radio label="relation">关联组件</el-radio>
      </el-radio-group>
      <el-input-number
        v-if="value.__config.minType === 'fix'"
        size="small"
        style="width: 100%"
        v-model="value.__config.min"
        controls-position="right"
        :step="1"
        step-strictly
      ></el-input-number>
      <el-select
        v-else
        size="small"
        style="width: 100%"
        v-model="value.__config.minRelation"
        placeholder="请选择"
      >
        <el-option
          v-for="(item, index) in originModelList"
          :key="index"
          :value="item.modelName"
          :label="item.__config.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="!isNumberCom"
      label="最大值"
      prop="__config.max"
      :rules="maxrules"
    >
      <el-input-number
        size="small"
        style="width: 100%"
        v-model="value.__config.max"
        controls-position="right"
        :min="value.__config.min + 1"
        :max="999999999999"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="最大值" v-else>
      <el-radio-group v-model="value.__config.maxType" style="width: 100%">
        <el-radio label="fix">固定值</el-radio>
        <el-radio label="relation">关联组件</el-radio>
      </el-radio-group>
      <el-input-number
        v-if="value.__config.maxType === 'fix'"
        size="small"
        style="width: 100%"
        v-model="value.__config.max"
        controls-position="right"
        :step="1"
        step-strictly
      ></el-input-number>
      <el-select
        v-else
        size="small"
        style="width: 100%"
        v-model="value.__config.maxRelation"
        placeholder="请选择"
      >
        <el-option
          v-for="(item, index) in originModelList"
          :key="index"
          :value="item.modelName"
          :label="item.__config.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
import xInput from "@/components/xInput/index.js";
import { mapGetters } from "vuex";

export default {
  components: { xInput },
  mixins: [basicmixins],
  computed: {
    maxrules() {
      return [
        {
          validator: (rule, v, callback) => {
            if (v < this.value.defaultValue) {
              this.value.defaultValue = v;
            }
            callback();
          },
          trigger: "change",
        },
      ];
    },
    minrules() {
      return [
        {
          validator: (rule, v, callback) => {
            if (v > this.value.defaultValue) {
              this.value.defaultValue = v;
            }
            callback();
          },
          trigger: "change",
        },
      ];
    },
    rules() {
      return [
        {
          validator: (rule, value, callback) => {
            let flag =
              value > this.value.__config.max ||
              value < this.value.__config.min;
            if (flag) {
              callback(
                new Error(
                  `输入有效值在${this.value.__config.min}至${this.value.__config.max}之间`
                )
              );
            } else {
              callback();
            }
          },
          trigger: "change",
        },
      ];
    },
    isNumberCom() {
      return ["hlInputNumber", "hlMoneyInput"].includes(this.value.tagName);
    },
    ...mapGetters(["getFormList"]),
    originModelList() {
      return this.getFormList.filter(
        (i) =>
          ["hlInputNumber", "hlMoneyInput"].indexOf(i.tagName) > -1 &&
          !!i.modelName &&
          i.key !== this.value.key
      );
    },
  },
  data() {
    return {};
  },
  watch: {
    "value.key": {
      handler(val) {
        if (val && this.isNumberCom) {
          if (!this.value.__config.minType) {
            this.$set(this.value.__config, "minType", "fix");
          }
          if (!this.value.__config.maxType) {
            this.$set(this.value.__config, "maxType", "fix");
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    outInput(v) {
      if (v !== 0 && !v) {
        this.value.defaultValue = null;
      } else {
        this.value.defaultValue = Number(v);
      }
    },
  },
};
</script>

